<template>
  <div class="cateContainer">
    <!-- 轮播图 -->
    <van-swipe class="banner" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(item, index) in cateList.currentCategory.bannerList"
        :key="index"
      >
        <img :src="item.picUrl"
      /></van-swipe-item>
    </van-swipe>
    <!-- 内容区域展示 -->
    <div
      class="showContainer"
      v-for="(category, index) in cateList.categoryItemList.slice(0, 8)"
      :key="index"
    >
      <div class="containertitle">
        <p>{{ category.category.name }}</p>
        <span>{{ category.category.frontName }}</span>
      </div>
      <div class="containerList">
        <div
          class="containerItem"
          v-for="(item1, index) in category.itemList"
          :key="index"
        >
          <img :src="item1.listPicUrl" alt="" />
          <p>{{ item1.name }}</p>
          <span>￥1399</span>
          <div class="pric">
            <div>特价</div>
            <span class="right">正在抢购中</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "CateList",
  data() {
    return {
      value: "",
      activeKey: 1,
    };
  },
  computed: {
    ...mapState({
      cateList: (state) => state.home.cateList,
    }),
  },
  mounted() {
    // this.$store.dispatch("getCateList");
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.cateContainer {
  //轮播图
  .banner {
    width: 100%;
    margin-bottom: 10px;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  //内容展示区域
  .showContainer {
    height: 1298px;
    // 标题
    .containertitle {
      height: 60px;
      text-align: center;
      p {
        font-size: 20px;
      }
      span {
        font-size: 14px;
      }
    }
    .containerList {
      display: flex;
      flex-wrap: wrap;
      .containerItem {
        width: 187.5px;
        height: 309.5px;
        img {
          width: 172.5px;
          height: 172.5px;
          margin-left: 7px;
          border-radius: 10px;
        }
        p {
          display: block;
          font-size: 15px;
          width: 187.5px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        span {
          font-size: 20px;
          font-weight: 700;
          color: red;
        }
        .pric {
          display: flex;
          width: 172.5px;
          height: 23px;
          border-radius: 11.5px;
          background-color: rgba(226, 191, 197, 0.918);
          div {
            width: 40px;
            height: 23px;
            background-color: red;
            border-radius: 11.5px;
            font-size: 15px;
            text-align: center;
            color: white;
          }
          .right {
            font-size: 15px;
            color: red;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
